<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/307027 (zh-CN, DDL); Windows/10.0.0 (Win64);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="2450"/>

<div>
<span><div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">什么是盒模型</span></h3><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。</span></h2><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">盒模型</span></h3><div><img src="file:///D:/2018%E6%A1%8C%E9%9D%A2/%E4%B8%80%E9%98%B6%E6%AE%B5%E8%AF%BE%E4%BB%B6/4%E7%AC%AC%E5%9B%9B%E5%A4%A9%E7%9B%92%E6%A8%A1%E5%9E%8B/box1.jpg"></img> <img src="file:///D:/2018%E6%A1%8C%E9%9D%A2/%E4%B8%80%E9%98%B6%E6%AE%B5%E8%AF%BE%E4%BB%B6/4%E7%AC%AC%E5%9B%9B%E5%A4%A9%E7%9B%92%E6%A8%A1%E5%9E%8B/box1.jpg"></img><img src="004-盒模型及文本溢出_files/box1.JPG" type="image/jpeg" data-filename="box1.JPG" width="498"/></div><div><img src="file:///D:/2018%E6%A1%8C%E9%9D%A2/%E4%B8%80%E9%98%B6%E6%AE%B5%E8%AF%BE%E4%BB%B6/4%E7%AC%AC%E5%9B%9B%E5%A4%A9%E7%9B%92%E6%A8%A1%E5%9E%8B/box1.jpg"></img></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">填充（内边距）</span></h3><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">1） padding的使用方法</span></h1><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。</span></h2><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">用法：</span></h1><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">1）用来调整子元素在父元素中的位置关系。</span></h1><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">注：padding属性需要添加在父元素上。</span></h1><h1><span style="font-size: 16pt; font-weight: normal;">2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。</span></h1><h1><span style="font-size: 16pt; font-weight: normal;"> 属性值的4种方式：</span></h1><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">  <span style="color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">四个值：上   右   下   左 {padding:10px   20px   30px    40px;}</span></span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">  三个值：上    左右    下 {padding:10px   20px   30px ;}</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">  二个值：上下    左右 {padding:10px   20px  ;}</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">  一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;"> 说明：可单独设置一方向填充，如：上方向padding-top:10px;    右方向pahdding-right:10px;    下方向padding-bottom:10px;     左方向padding-left:10px;</span></h2><div><span style="font-size: medium; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;-en-paragraph:true;"> </span></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">外边距</span></h3><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">3） margin的使用方法</span></h1><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">  边界：margin,在元素外边的空白区域，被称为边距。</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">margin-left:左边界margin-right:右边界margin-top:上边界margin-bottom:下边界</span></h2><div style="font-size: medium; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin-top: 1em; margin-bottom: 1em;"><span style="font-size: medium; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;-en-paragraph:true;"> </span></div><h2>  属性值的4种方式： </h2><h2>  四个值：上 右 下 左</h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">  三个值：上 左右 下</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">  二个值：上下 左右</span></h2><h2>  一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/</h2><h2> margin:2px 4px;/*定义元素上下边界为2px，左右边界为4px/</h2><h2> margin:2px 4px 6px;/*定义元素上边界为2px，左右边界4px下边界为6px，*/</h2><h2> margin:2px 4px 6px 8px;/*定义元素上、右边界为2px，下右边界为6px，左边界为8px*/</h2><h2> margin:0 auto;/*在浏览器中横向居中。</h2><h2>定义元素上、下边界为2px，</h2><h2>说明：可单独设置一方向边界，如：margin-top:10px;</h2><div style="font-size: medium; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin-top: 1em; margin-bottom: 1em;"><span style="font-size: medium; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;-en-paragraph:true;"> </span></div><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">*margin值的解析：</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;"><font style="color: rgb(45, 79, 201);">左右边界累加，上下边界重合</font></span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">。</span></h1><div style="font-size: medium; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin-top: 1em; margin-bottom: 1em;"><span style="font-size: medium; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;-en-paragraph:true;"> </span></div><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">*子元素（块）直接写margin-top时，会将margin-top属性值加上父元素身上,(不设置任何浮动及定位的属性的前提下)</span></h1><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">边框</span></h3><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">4） border的使用方法</span></h1><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">  border:边框宽度 边框风格 边框颜色;</span></h1><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">  例如：border:5px solid #f00</span></h1><div style="font-size: medium; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin-top: 1em; margin-bottom: 1em;"><span style="font-size: medium; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;-en-paragraph:true;"> </span></div><h2>边框：border,网页中很多修饰性线条都是由边框来实现的。</h2><h2>边框宽度：border-width:</h2><h2>边框颜色：border-color:</h2><h2>边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)</h2><h2>可单独设置一方向边框，</h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">如：border-bottom:边框宽度 边框风格 边框颜色;底边框</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">border-left:边框宽度 边框风格 边框颜色;左边框</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">border-right:边框宽度 边框风格 边框颜色;右边框</span></h2><h2>border-top:边框宽度 边框风格 边框颜色;上边框</h2><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">盒子的实际大小</span></h3><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">1）盒子的实际大小：</span></h1><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">宽 =左右border+左右padding+width</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">高 =上下border+上下padding+height</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">例如：一个盒子的 border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">宽= border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">高= border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px</span></h2><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">溢出属性</span></h3><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">visible:默认值，内容不会被修剪，会成现在元素框之外；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">hidden：内容会被修剪，并且其余内容是不可见的；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">inherit：规定应该从父元素继承overflow属性的值。</span></h2><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">空余空间</span></h3><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit</span></h2><h1 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 16pt; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">该属性用来设置如何处理元素内的空白；</span></span></h1><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">normal：默认值，空白会被浏览器忽略，</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">nowrap:文本不会换行，文本会在同一行上继续，直到遇到&lt;br/&gt;标签为止；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">pre-wrap：保留空白符序列，文字超出边界时会正常换行；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">pre-line:合并空白符序列，但是保留换行符；</span></h2><h2 style="letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-family: Simsun; font-variant-caps: normal; font-variant-ligatures: normal;">inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)</span></h2><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">CSS</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">CSS</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">CSS</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 5px 0px 5px 15px; background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background: rgb(0, 170, 136); font-size: 20px; border-radius: 4px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 252, 244); font-family: 微软雅黑; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一、CSS简介</span></h3><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></div><div><br/></div></span>
</div></body></html> 